<template>
    <div style="width: 100%;">
        <!-- 搜索表单 -->
        <el-form :inline="true" ref="formRef" :model="formInline" class="demo-form-inline">
            <el-form-item label="发放时间">
                <el-date-picker style="width: 250px;" v-model="formInline.time" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item class="search">
                <el-button type="primary" :icon="Refresh" @click="resetFormInline">重置</el-button>
                <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <div class="table">
            <el-table :data="tableData" style="width: 100%" border height="420" show-overflow-tooltip>
                <el-table-column fixed label="索引" type="index" :index="indexMethod" align="center" width="55" />
                <el-table-column prop="send_time" label="发放时间" :formatter="formatDate" />
                <el-table-column prop="staff_no" label="工号" />
                <el-table-column prop="staff_name" label="姓名" />
                <el-table-column prop="position" label="职位" />
                <el-table-column prop="department_name" label="部门" />
                <el-table-column prop="base_pay" label="基本工资" />
                <el-table-column prop="net_salary" label="实发工资" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button type="primary" @click="handleDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-wrapper">
            <el-pagination class="pagination" v-model:current-page="page.pageNum" v-model:page-size="page.pageSize"
                :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 弹窗-详情 -->
        <el-dialog class="dialog" v-model="dialogDetailVisible" title="详情" width="800" :close="handleDetailClose">
            <el-form class="dialog-form" :inline="true" :model="dialogDetailForm" ref="dialogDetailFormRef">
                <el-form-item label-width="120px" label="发放时间">
                    <el-input v-model="dialogDetailForm.send_time" />
                </el-form-item>
                <el-form-item label-width="120px" label="工号">
                    <el-input v-model="dialogDetailForm.staff_no" />
                </el-form-item>
                <el-form-item label-width="120px" label="姓名">
                    <el-input v-model="dialogDetailForm.staff_name" />
                </el-form-item>
                <el-form-item label-width="120px" label="职位">
                    <el-input v-model="dialogDetailForm.position" />
                </el-form-item>
                <el-form-item label-width="120px" label="部门">
                    <el-input v-model="dialogDetailForm.department_name" />
                </el-form-item>
                <el-form-item label-width="120px" label="基本工资">
                    <el-input v-model="dialogDetailForm.base_pay" />
                </el-form-item>
                <el-form-item label-width="120px" label="绩效">
                    <el-input v-model="dialogDetailForm.achievements" />
                </el-form-item>
                <el-form-item label-width="120px" label="生活补贴">
                    <el-input v-model="dialogDetailForm.living_allowance" />
                </el-form-item>
                <el-form-item label-width="120px" label="全勤">
                    <el-input v-model="dialogDetailForm.full_attendance" />
                </el-form-item>
                <el-form-item label-width="120px" label="加班">
                    <el-input v-model="dialogDetailForm.overtime_pay" />
                </el-form-item>
                <el-form-item label-width="120px" label="五险一金">
                    <el-input v-model="dialogDetailForm.insurance" />
                </el-form-item>
                <el-form-item label-width="120px" label="旷工">
                    <el-input v-model="dialogDetailForm.absenteeism_fee" />
                </el-form-item>
                <el-form-item label-width="120px" label="其它">
                    <el-input v-model="dialogDetailForm.other_deductions" />
                </el-form-item>
                <el-form-item label-width="120px" label="实发工资">
                    <el-input v-model="dialogDetailForm.net_salary" />
                </el-form-item>
                <el-form-item label-width="120px" label="备注">
                    <el-input v-model="dialogDetailForm.remarks" clearable />
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { timeProcessing } from '@/utils/date'
import { useUserStore } from '@/store/user';
import { querySalary, addSalary, delSalary, queryEmployees, updateSalary } from '@/api/employee';

const userStore = useUserStore();
const info = computed(() => userStore.userInfo);

// 分页
const page = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
})

// 部门和职位
const departments = reactive({
    departmentList: [],
    positionList: []
})

// 表单-搜索-数据
const formInline = reactive({
    staffName: info.value.staff_name,
    position: info.value.position,
    time: null,
})

// 表格数据
const tableData = ref([])

// 多选-id
const ids = ref([]);

// 详情-弹窗
const dialogDetailVisible = ref(false)
const dialogDetailFormRef = ref(null)
const dialogDetailForm = reactive({})

// 索引
const indexMethod = (index) => {
    return page.pageSize * (page.pageNum - 1) + index + 1
}

const formatDate = (row, column, cellValue) => {
    return timeProcessing(cellValue, 'date')
}

// 重置
const resetFormInline = () => {
    formInline.time = null;
    searchData();
}

// 搜索
const searchData = async () => {
    const data = {
        staffName: formInline.staffName,
        position: formInline.position,
        sendTimeStart: formInline.time ? formInline.time[0] : '',
        sendTimeEnd: formInline.time ? formInline.time[1] : '',
        pageNum: page.pageNum,
        pageSize: page.pageSize,
    }
    try {
        const res = await querySalary(data);
        if (res.code === 0) {
            tableData.value = res.data.list;
            page.total = res.data.total;
        } else {
            ElMessage.error(res.msg);
        }
    } catch {
        console.log("请求失败");
    }
}

// 计算实发工资
const computePay = (base_pay) => {
    let net_salary = Number(base_pay) -
        Number(dialogFormAdd.insurance) +
        Number(dialogFormAdd.full_attendance) +
        Number(dialogFormAdd.achievements) +
        Number(dialogFormAdd.overtime_pay) +
        Number(dialogFormAdd.living_allowance) -
        Number(dialogFormAdd.absenteeism_fee) +
        Number(dialogFormAdd.other_deductions);
    return net_salary;
}

// 详情-弹窗-打开
const handleDetail = (row) => {
    dialogDetailVisible.value = true;
    dialogDetailForm.id = row.id;
    dialogDetailForm.send_time = row.send_time;
    dialogDetailForm.staff_no = row.staff_no;
    dialogDetailForm.staff_name = row.staff_name;
    dialogDetailForm.position = row.position;
    dialogDetailForm.department_name = row.department_name;
    dialogDetailForm.base_pay = row.base_pay;
    dialogDetailForm.achievements = row.achievements;
    dialogDetailForm.living_allowance = row.living_allowance;
    dialogDetailForm.full_attendance = row.full_attendance;
    dialogDetailForm.overtime_pay = row.overtime_pay;
    dialogDetailForm.insurance = row.insurance;
    dialogDetailForm.absenteeism_fee = row.absenteeism_fee;
    dialogDetailForm.other_deductions = row.other_deductions;
    dialogDetailForm.net_salary = row.net_salary;
    dialogDetailForm.remarks = row.remarks;
}

// 详情-弹窗-关闭
const handleDetailClose = () => {
    dialogDetailVisible.value = false
    if (dialogDetailFormRef.value) dialogDetailFormRef.value.resetFields();
}

// 分页
const handleSizeChange = (val) => {
    page.pageSize = val
    searchData()
}

const handleCurrentChange = (val) => {
    page.pageNum = val
    searchData()
}

onMounted(() => {
    if (Object.keys(info.value).length > 0) {
        formInline.position = info.value.position;
        formInline.staffName = info.value.staff_name;
    } else {
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        formInline.position = userInfo.position;
        formInline.staffName = userInfo.staff_name;
        info.value.position = userInfo.position;
        info.value.staff_name = userInfo.staff_name;
    }
    searchData();
})
</script>

<style lang="scss" scoped>
.demo-form-inline {
    padding: 10px 20px 0;
}

.demo-form-inline .el-input {
    --el-input-width: 150px;
}

.demo-form-inline .el-select {
    --el-select-width: 150px;
}

.btn-group {
    box-sizing: border-box;
    padding-right: 20px;
    margin-bottom: 5px;
    margin-top: -15px;
    float: right;
}

.table {
    box-sizing: border-box;
    padding: 0 20px 0 15px;
}

.footer {
    position: relative;
    width: 100%;
    height: auto;
}

.pagination-wrapper {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: flex-end;
}

.pagination {
    margin-top: 15px;
    margin-right: 20px;
}

:deep(.el-dialog__body) {
    display: flex;
    justify-content: center;
}

.dialog-form {
    .el-input {
        --el-input-width: 220px;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #8c939d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: none;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.dialog-add-form {
    .el-input {
        --el-input-width: 220px;
    }

    .el-select {
        --el-select-width: 220px;
    }
}
</style>